<template>
  <!-- 重点监管危险化学工艺管理 -->
  <div class="majorSupeHazardChemManager">
    <basic-container>
      <!-- 表格内容 -->
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 :page.sync="page"
                 ref="crud"
                 @row-del="rowDel"
                 v-model="form"
                 :permission="permissionList"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 :before-open="beforeOpen"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
        <template slot="menuLeft">
          <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.major_supe_hazard_chem_delete" @click="handleDelete">删 除</el-button>
          <el-button type="success" size="small" icon="el-icon-upload2" plain v-if="permission.major_supe_hazard_chem_import" @click="handleImport">导 入</el-button>
          <el-button type="warning" size="small" icon="el-icon-download" plain v-if="permission.major_supe_hazard_chem_export" @click="handleExport">导 出</el-button>
        </template>

        <!-- 绑定摄像头 -->
        <template slot="zdjg" slot-scope="scope">
          <el-form label-width="0px">
            <el-badge :value="scope.row['bindingCounts']" class="item">
              <el-button type="warning" size="small" @click="handleCamera(scope.row['id'])">绑定 摄像头</el-button>
            </el-badge>
          </el-form>
        </template>

        <!--巡检点-->
        <template slot="ckxjjl" slot-scope="scope">
          <el-form label-width="0px">
            <td style="border: 0px">
              <el-button type="primary" size="small" @click="handleViewXjjl(scope.row['id'])">查看巡检记录</el-button>
            </td>
          </el-form>
        </template>

        <!-- 选择反应釜-->
        <template slot="idsLabel">
          <span style="color:#F56C6C">*</span><span>选择反应釜:</span>
        </template>
        <template slot="idsForm">
          <el-form label-width="0px">
            <el-button type="success" size="small" @click="handleReak">选择 反应釜</el-button>
            <span v-if="reakTagsErr" class="reak_error">请选择反应釜</span>
            <div class="reak_point_list">
              <el-tag :key="index" v-for="(tag, index) in reakTags" closable :disable-transitions="false" @close="closeReakTag(index)">{{tag.fyfbh}}</el-tag>
            </div>
          </el-form>
        </template>
      </avue-crud>
      <!-- 绑定反应釜弹窗 -->
      <el-dialog title="选择 反应釜" :visible.sync="dialogReak" append-to-body @close='closeDialog' width="1200px">
        <avue-crud :option="reakOption"
                   :table-loading="reakLoading"
                   :data="reakData"
                   :page.sync="reakPage"
                   ref="reakCrud"
                   @search-change="reakSearchChange"
                   @search-reset="reakSearchReset"
                   @selection-change="reakSelectionChange"
                   @current-change="reakCurrentChange"
                   @size-change="reakSizeChange">
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="chooseReak()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 导入弹窗-->
      <el-dialog title="危险工艺信息导入" append-to-body :visible.sync="excelBox" width="555px">
        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
          <template slot="excelTemplate">
            <el-button type="primary" @click="handleTemplate">
              点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
          </template>
        </avue-form>
      </el-dialog>
      <!-- 绑定摄像头弹窗 -->
      <el-dialog title="选择 摄像头" :visible.sync="dialogCamera" append-to-body @close='closeDialogCamera' width="1200px" class="majorSupeHazardChemManager">
        <avue-crud :option="cameraOption"
                   :table-loading="cameraLoading"
                   :data="cameraData"
                   :page.sync="cameraPage"
                   ref="cameraCrud"
                   @search-change="cameraSearchChange"
                   @search-reset="cameraSearchReset"
                   @selection-change="cameraSelectionChange"
                   @current-change="cameraCurrentChange"
                   @size-change="cameraSizeChange">
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialogCamera">取 消</el-button>
          <el-button type="primary" @click="chooseCamera()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 巡检记录弹窗 -->
      <el-dialog
        title="巡检记录"
        append-to-body
        :visible.sync="patrolRecordDialog"
        :close-on-click-modal="false"
        :before-close="closePatrolRecordDialog"
        width="60%"
        class="patrol_record_dialog">
        <!-- 巡检表格内容 -->
        <avue-crud
          :option="patrolRecordOption"
          :table-loading="patrolRecordLoading"
          :data="patrolRecordData"
          :page.sync="patrolRecordPage"
          v-model="patrolRecordForm">
        </avue-crud>
        <!-- 按钮 -->
        <div class="modify_record_footer">
          <el-button
            type="primary"
            size="small"
            @click="closePatrolRecordDialog()">
            确 定
          </el-button>
        </div>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
  import {getList, remove, update, add, getMajorSupeHazardChemInfo, getReakSList, getCameraBinding, bindingCamera, getCameraBindingList, getPatrolRecordList} from "@/api/mmhi/major_supe_hazard_chem";
  import {validateDigit, validateDigitEnglish} from "@/api/mmhi/validate";
  import {getToken} from "@/util/auth";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        excelBox: false,
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              showFileList: false,
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/majorSupeHazardChemManage/bladeMajorSupeHazardChem/import-majorSupeHazardChem"
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        },
        option: {
          height: 'auto',
          refreshBtn: true,
          columnBtn: true,
          calcHeight: 30,
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "企业编码",
              prop: "qybm",
              align: "center",
              maxlength:18,
              hide: true,
              rules: [{
                required: true,
                validator: validateDigitEnglish,
                trigger: "blur"
              }]
            },
            {
              label: "工艺编码",
              prop: "gybm",
              align: "center",
              search: true,
              maxlength:12,
              rules: [{
                required: true,
                validator: validateDigitEnglish,
                trigger: "blur"
              }],
            },
            {
              label: "生产工艺名称",
              type: "tree",
              width: "100px",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=majorSupeHazardChem_scgymc",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              search: true,
              prop: "scgymc",
              align: "center",
              rules: [{
                required: true,
                message: "请选择生产工艺名称",
                trigger: "blur"
              }]
            },
            {
              label: "反应类型",
              prop: "fylx",
              align: "center",
              maxlength:25,
              rules: [{
                required: true,
                message: "请输入反应类型",
                trigger: "blur"
              }],
            },
            {
              label: "最终产品",
              prop: "zzcp",
              align: "center",
              maxlength:100,
              hide: true,
              rules: [{
                required: true,
                message: "请输入最终产品",
                trigger: "blur"
              }],
            },
            {
              label: "最终产品物质形态",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=majorSupeHazardChem_zzcpwzxt",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              prop: "zzcpwzxt",
              align: "center",
              rules: [{
                required: true,
                message: "请选择最终产品物质形态",
                trigger: "blur"
              }]
            },
            {
              label: "中间产品",
              prop: "zjcp",
              align: "center",
              maxlength:100,
              hide: true,
              rules: [{
                required: false,
                message: "请输入中间产品",
                trigger: "blur"
              }],
            },
            {
              label: "中间产品物质形态",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=majorSupeHazardChem_zjcpwzxt",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              hide: true,
              prop: "zjcpwzxt",
              align: "center",
              rules: [{
                required: false,
                message: "请选择中间产品物质形态",
                trigger: "blur"
              }]
            },
            {
              label: "重点监控单元",
              prop: "zdjkdy",
              width: "100px",
              align: "center",
              maxlength:25,
              rules: [{
                required: true,
                message: "请输入重点监控单元",
                trigger: "blur"
              }],
            },
            {
              label: "工艺危险特点",
              prop: "gywxtd",
              width: "100px",
              align: "center",
              maxlength:25,
              rules: [{
                required: false,
                message: "请输入工艺危险特点",
                trigger: "blur"
              }],
            },
            {
              label: "重点监控工艺参数",
              type: "select",
              width: "120px",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=majorSupeHazardChem_zdjkgycs",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              prop: "zdjkgycs",
              align: "center",
              rules: [{
                required: false,
                message: "请选择重点监控工艺参数",
                trigger: "blur"
              }]
            },
            {
              label: "控制方式",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=majorSupeHazardChem_kzfs",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              prop: "kzfs",
              align: "center",
              rules: [{
                required: false,
                message: "请选择控制方式",
                trigger: "blur"
              }]
            },
            {
              label: "自动控制措施",
              prop: "zdkzcs",
              align: "center",
              maxlength:15,
              hide: true,
              rules: [{
                required: true,
                message: "请输入自动控制措施",
                trigger: "blur"
              }],
            },
            {
              label: "是否重点监管化工工艺",
              type: "select",
              width: "145x",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              prop: "sfzdjghggy",
              align: "center",
              rules: [{
                required: true,
                message: "请选择是否重点监管化工工艺",
                trigger: "blur"
              }]
            },
            {
              label: "岗位操作人数",
              prop: "gwczrs",
              width: "100px",
              align: "center",
              maxlength:10,
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }],
            },
            {
              label: "持证人数",
              prop: "czrs",
              align: "center",
              maxlength:5,
              rules: [{
                required: true,
                validator: validateDigit,
                trigger: "blur"
              }],
            },
            {
              label: "技术来源",
              prop: "jsly",
              align: "center",
              maxlength:25,
              hide: true,
              rules: [{
                required: false,
                message: "请输入技术来源",
                trigger: "blur"
              }],
            },
            {
              label: "设计单位",
              prop: "sjdw",
              align: "center",
              maxlength:25,
              rules: [{
                required: false,
                message: "请输入设计单位",
                trigger: "blur"
              }],
            },
            {
              label: "工艺系统简况",
              prop: "gyxtjk",
              align: "center",
              type: "textarea",
              maxlength:1000,
              span: 24,
              hide: true,
              rules: [{
                required: true,
                message: "请输入工艺系统简况",
                trigger: "blur"
              }],
            },
            {
              label: "设计单位资质等级",
              prop: "sjdwzzdj",
              width: "120px",
              align: "center",
              maxlength:15,
              rules: [{
                required: true,
                message: "请输入工艺系统简况",
                trigger: "blur"
              }],
            },
            {
              label: "是否满足国家规定的要求",
              type: "select",
              width: "155px",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              prop: "sfmzgjgdyq",
              align: "center",
              rules: [{
                required: true,
                message: "请选择是否满足国家规定的要求",
                trigger: "blur"
              }]
            },
            {
              label: "重点监管",
              width: "120px",
              prop: "zdjg",
              slot: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: false,
              align: "center"
            },
            {
              label: "操作",
              width: "125px",
              prop: "ckxjjl",
              slot: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: false,
              align: "center"
            },
            {
              label: "反应釜",
              prop: "fyfbh",
              align: "center",
              addDisplay: false,
              viewDisplay: false,
              editDisplay: false,
              hide: true
            },
            {
              label: "绑定反应釜",
              prop: "ids",
              align: "center",
              hide: true,
              viewDisplay: false,
              formslot:true,
              labelslot:true
            },
            {
              label: "企业id",
              prop: "bladeDeptId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "租户id",
              prop: "tenantId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建人",
              prop: "createUser",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建部门",
              prop: "createDept",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建时间",
              prop: "createTime",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "自定义巡检点id",
              prop: "patrolPointCustomSettingsId",
              align: "center",
              row: false,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            }
          ]
        },
        data: [],

        dialogReak: false,
        reakQuery: {},
        reakLoading: true,
        reakPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        reakSelectionList: [],
        reakOption: {
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          menu: false,
          addBtn: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          refreshBtn: false,
          columnBtn: false,
          column: [
            {
              label: "编号",
              prop: "fyfbh",
              align: "center",
              search: true
            },
            {
              label: "名称",
              prop: "fyfmc",
              align: "center"
            }
          ]
        },
        reakData: [],
        reakTags: [],
        reakTagsErr: false,
        selectReak: {},

        dialogCamera: false,
        cameraQuery: {},
        cameraLoading: true,
        cameraPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        cameraSelectionList: [],
        cameraOption: {
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          menu: false,
          addBtn: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          refreshBtn: false,
          columnBtn: false,
          column: [
            {
              label: "摄像头名称",
              prop: "sxtmc",
              align: "center",
              search: true
            },
            {
              label: "摄像头ID",
              prop: "sxtid",
              align: "center"
            },
            {
              label: "安装位置",
              prop: "azwz",
              align: "center"
            },
            {
              label: "所属区域",
              prop: "ssqy",
              align: "center"
            }
          ]
        },

        cameraData: [],
        selectCamera: {},
        dataCameraBindingList: [],

        // 查看巡检记录弹窗
        patrolRecordDialog: false,
        currentId: "",
        patrolRecordForm: {},
        patrolRecordLoading: true,
        patrolRecordQuery: {},
        patrolRecordData: [],
        patrolRecordPage: {
          pageSize: this.$pageSize,
          currentPage: 1,
          total: 0
        },
        patrolRecordOption: {
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          viewBtn: true,
          dialogClickModal: false,
          calcHeight: 30,
          tip: false,
          index: true,
          selection: false,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menu: false,
          column: [
            {
              label: "巡检点名称",
              prop: "rwmc",
              align: "center",
              width:"100px",
            },
            {
              label: "巡检人",
              prop: "xjr",
              align: "center",
              width:"60px",
            },
            {
              label: "所在部门",
              prop: "szbm",
              align: "center",
              width:"90px",
            },
            {
              label: "检查频次",
              prop: "jcpc",
              align: "center",
              width:"80px",
            },
            {
              label: "巡检生产区域",
              prop: "xjscqy",
              align: "center",
              width:"100px",
            },
            {
              label: "巡检设备设施",
              prop: "xjsbss",
              align: "center",
              width:"100px",
            },
            {
              label: "巡检时间",
              prop: "xjsj",
              align: "center",
              width:140,
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
            },
            {
              label: "巡检隐患描述",
              prop: "xjyhms",
              align: "center",
              width:140,
            },
            {
              label: "巡检结果",
              prop: "xjjg",
              align: "center",
              width:"80px",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=patrol_point_management_xjjg",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType:"number",
            },
            {
              label: "状态",
              display: false,
              prop: "zt",
              align: "center",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=patrol_point_management_zt",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType:"number",
            },
            {
              label: "核实人",
              prop: "hsr",
              align: "center",
              dicUrl: "/api/emerRectify/rectify/getPersonInfo",
              props: {
                label: "name",
                value: "id",
              },
              width:"60px",
            },
            {
              label: "巡检隐患级别",
              prop: "xjyhjb",
              align: "center",
              width:"120px",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=patrol_point_management_xjyhjb",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              addDisplay: false,
              dataType:"number"
            }
          ]
        },

        //重点监管危险化学品工艺id
        productionSiteBindingId: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      // 表格按钮权限
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.major_supe_hazard_chem_add, false),
          viewBtn: this.vaildData(this.permission.major_supe_hazard_chem_view, false),
          delBtn: this.vaildData(this.permission.major_supe_hazard_chem_delete, false),
          editBtn: this.vaildData(this.permission.major_supe_hazard_chem_edit, false)
        };
      },
      // 勾选项id
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {

      //查看巡检记录
      handleViewXjjl(row) {
        this.currentId ='';
        this.currentId = row;
        this.patrolRecordDialog = true;
        this.patrolRecordData = [];
        this.patrolRecordPage.currentPage = 1;
        this.patrolRecordOnLoad(this.patrolRecordPage);
      },

      // 获取巡检记录列表
      patrolRecordOnLoad(page, params = {}) {
        this.patrolRecordLoading = true;
        params.id=this.currentId
        getPatrolRecordList(page.currentPage, page.pageSize, Object.assign(params, this.patrolRecordQuery)).then(res => {
          let resData = res.data.data;
          this.patrolRecordPage.total = resData.total;
          this.patrolRecordData = resData.records;
          this.patrolRecordLoading = false;
        });
      },

      // 确认、取消、关闭巡检记录记录弹窗
      closePatrolRecordDialog() {
        this.patrolRecordDialog = false;
        this.currentId = "";
      },

      // 打开选择反应釜弹窗
      handleReak() {
        this.dialogReak = true;
        this.reakOnLoad(this.reakPage);
      },

      // 关闭选择反应釜弹窗
      closeDialog() {
        this.reakPage.currentPage = 1;
        this.dialogReak = false;
        this.reakSelectionClear();
      },

      // 反应釜获取表格数据
      reakOnLoad(page, params = {}) {
        this.reakLoading = true;
        getReakSList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.reakPage.total = data.total;
          this.reakData = data.records;
          this.reakLoading = false;
          if(this.selectReak !== undefined && JSON.stringify(this.selectReak) !== "{}" && this.reakTags.length !== 0) {
            this.$nextTick(() => {
              this.reakData.forEach(row => {
                if(this.selectReak[row.id] !== undefined) {
                  this.$refs.reakCrud.toggleRowSelection(row, true);
                }
              })
            })
          }
        });
      },

      // 反应釜清空勾选
      reakSelectionClear() {
        this.reakSelectionList = [];
        this.$refs.reakCrud.toggleSelection();
      },

      // 反应釜搜索条件改变事件
      reakSearchChange(params, done) {
        this.reakQuery = params;
        this.reakPage.currentPage = 1;
        this.reakOnLoad(this.reakPage, params);
        done();
      },

      // 反应釜清空搜索条件
      reakSearchReset() {
        this.reakQuery = {};
        this.reakOnLoad(this.reakPage);
      },

      // 反应釜勾选
      reakSelectionChange(list) {
        this.reakSelectionList = list;
      },

      // 反应釜换页数
      reakCurrentChange(currentPage){
        const pageSelectIds = [];
        const pageAllIds = [];
        this.reakSelectionList.forEach(item => {
          this.selectReak[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.reakData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectReak) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectReak[id];
          }
        }
        this.reakPage.currentPage = currentPage;
        this.reakOnLoad(this.reakPage);
      },

      // 反应釜换每页显示数量
      reakSizeChange(pageSize){
        this.reakPage.pageSize = pageSize;
        this.reakOnLoad(this.reakPage);
      },

      // 选择反应釜
      chooseReak() {
        const pageSelectIds = [];
        const pageAllIds = [];
        this.reakSelectionList.forEach(item => {
          this.selectReak[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.reakData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectReak) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectReak[id];
          }
        }
        if(this.selectReak === undefined || JSON.stringify(this.selectReak) === "{}") {
          this.$message.warning("请选择反应釜");
          return;
        }
        this.reakTagsErr = false;
        this.reakTags = [];
        for(let id in this.selectReak) {
          this.reakTags.push(this.selectReak[id]);
        }
        this.closeDialog();
      },

      // 删除某一个reak标签
      closeReakTag(index) {
        this.reakTags.splice(index, 1);
        if(this.reakTags.length === 0) {
          this.reakTagsErr = true;
        }
      },

      // 打开绑定摄像头弹窗
      handleCamera(id) {
        this.productionSiteBindingId = id;
        this.dialogCamera = true;
        //调用获取对应绑定摄像头集合
        getCameraBindingList(id, 0).then((data) => {
          this.dataCameraBindingList=data.data.data
        });
        this.cameraOnLoad(this.cameraPage);
      },

      // 关闭绑定摄像头弹窗
      closeDialogCamera() {
        this.cameraPage.currentPage = 1;
        this.dialogCamera = false;
        this.cameraSelectionClear();
      },

      // 摄像头获取表格数据
      cameraOnLoad(page, params = {}) {
        this.cameraLoading = true;
        getCameraBinding(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.cameraPage.total = data.total;
          this.cameraData = data.records;
          this.cameraLoading = false;
          console.log(this.selectCamera);
          this.$nextTick(() => {
            this.cameraData.forEach(row => {
              this.dataCameraBindingList.forEach(item => {
                if(item.cameraId===row.id){
                  this.$refs.cameraCrud.toggleRowSelection(row, true);
                }
              })
            })
          })
        });
      },

      // 绑定摄像头清空勾选
      cameraSelectionClear() {
        this.cameraSelectionList = [];
        this.$refs.cameraCrud.toggleSelection();
      },

      // 摄像头搜索条件改变事件
      cameraSearchChange(params, done) {
        this.cameraQuery = params;
        this.cameraPage.currentPage = 1;
        this.cameraOnLoad(this.cameraPage, params);
        done();
      },

      // 摄像头清空搜索条件
      cameraSearchReset() {
        this.cameraQuery = {};
        this.cameraOnLoad(this.cameraPage);
      },

      // 摄像头勾选
      cameraSelectionChange(list) {
        this.cameraSelectionList = list;
      },

      // 摄像头换页数
      cameraCurrentChange(currentPage){
        const pageSelectIds = [];
        const pageAllIds = [];
        this.cameraSelectionList.forEach(item => {
          this.selectCamera[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.cameraData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectCamera) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectCamera[id];
          }
        }
        this.cameraPage.currentPage = currentPage;
        this.cameraOnLoad(this.cameraPage);
      },

      // 摄像头换每页显示数量
      cameraSizeChange(pageSize){
        this.cameraPage.pageSize = pageSize;
        this.cameraOnLoad(this.cameraPage);
      },

      // 选择摄像头
      chooseCamera(loading) {
        const pageSelectIds = [];
        const pageAllIds = [];
        this.cameraSelectionList.forEach(item => {
          this.selectCamera[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.cameraData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectCamera) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectCamera[id];
          }
        }

        const ids = pageSelectIds.join(",");
        const id = this.productionSiteBindingId;
        bindingCamera(ids,id).then(() => {
          this.closeDialogCamera();
          this.onLoad(this.page);
          this.$message.success("绑定成功!");
        }, error => {
          loading();
          window.console.log(error);
        });
      },

      // 新增
      rowSave(row, done, loading) {
        if(this.reakTags.length === 0) {
          this.reakTagsErr = true;
          loading();
          return;
        }
        delete row.fyfbh;
        const idsArr = [];
        this.reakTags.forEach(item => {
          idsArr.push(item.id);
        });
        row.ids = idsArr.join(",");
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },

      // 编辑
      rowUpdate(row, index, done, loading) {
        if(this.reakTags.length === 0) {
          this.reakTagsErr = true;
          loading();
          return;
        }
        const idsArr = [];
        const updateData = {
          id: row.id,
          qybm: row.qybm,
          gybm: row.gybm,
          scgymc: row.scgymc,
          fylx: row.fylx,
          zzcp: row.zzcp,
          zzcpwzxt: row.zzcpwzxt,
          zjcp: row.zjcp,
          zjcpwzxt: row.zjcpwzxt,
          zdjkdy: row.zdjkdy,
          gywxtd: row.gywxtd,
          zdjkgycs: row.zdjkgycs,
          kzfs: row.kzfs,
          zdkzcs: row.zdkzcs,
          sfzdjghggy: row.sfzdjghggy,
          gwczrs: row.gwczrs,
          czrs: row.czrs,
          jsly: row.jsly,
          sjdw: row.sjdw,
          gyxtjk: row.gyxtjk,
          sjdwzzdj: row.sjdwzzdj,
          sfmzgjgdyq: row.sfmzgjgdyq,
          fyfbh: row.fyfbh,
          fyfmc: row.fyfmc,
          bladeDeptId: row.bladeDeptId,
          tenantId: row.tenantId,
          createUser: row.createUser,
          createDept: row.createDept,
          createTime: row.createTime,
          patrolPointCustomSettingsId: row.patrolPointCustomSettingsId,
          ids: ""
        };
        this.reakTags.forEach(item => {
          idsArr.push(item.id);
        });
        updateData.ids = idsArr.join(",");
        update(updateData).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          done();
        },error => {
          window.console.log(error);
          loading();
        });
      },

      // 删除一条
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return remove(row.id);
        }).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
        });
      },

      // 删除多条
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return remove(this.ids);
        }).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          this.$refs.crud.toggleSelection();
        });
      },

      // 打开弹窗前
      beforeOpen(done, type) {
        this.reakTagsErr = false;
        this.reakTags = [];
        this.selectReak = {};
        if (["edit", "view"].includes(type)) {
          getMajorSupeHazardChemInfo(this.form.id).then(res => {
            this.form = res.data.data;
            this.form.reakDataSiteInfos.forEach(item => {
              this.reakTags.push(item);
              this.selectReak[item.id] = item;
            });
          });
        }
        done();
      },

      // 清空搜索条件
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },

      // 搜索条件改变事件
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },

      // 勾选
      selectionChange(list) {
        this.selectionList = list;
      },

      // 清空勾选
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      // 换页数
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },

      // 换每页显示数量
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },

      // 刷新
      refreshChange() {
        this.onLoad(this.page, this.query);
      },

      // 获取表格数据
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      handleImport() {
        this.excelBox = true;
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(column);
        this.excelBox = false;
        this.refreshChange();
        done();
      },
      handleTemplate() {
        window.open(`/api/majorSupeHazardChemManage/bladeMajorSupeHazardChem/export-template?${this.website.tokenHeader}=${getToken()}`);
      },
      handleExport() {
        this.$confirm("是否导出危险工艺信息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/majorSupeHazardChemManage/bladeMajorSupeHazardChem/export-majorSupeHazardChem?${this.website.tokenHeader}=${getToken()}`);
        });
      },
    }
  };
</script>

<style lang="scss">
  .majorSupeHazardChemManager {
    .el-form-item__label {
      width: 100px !important;
    }
    .avue-form__row {
      .el-form-item__content {
        margin-left: 100px !important;
      }
    }
  }

</style>

<style lang="scss" scpoed>
  .avue-crud__dialog {
    .el-dialog__body {
      .el-form-item__label {
        width: 130px !important;
      }

      .avue-form__row {
        .el-form-item__content {
          margin-left: 130px !important;
        }
      }
    }
  }

  .el-dialog__wrapper {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;

      .el-form-item__label {
        width: 72px;
      }

      .avue-form__row {
        .el-form-item__content {
          margin-left: 72px;
        }
      }

      .avue-crud__menu {
        display: none;
      }
    }
  }

  .reak_error {
    color: #F56C6C;
    font-size: 12px;
    margin-left: 5px;
  }

  .reak_point_list {
    margin-top: 5px;

    .el-tag {
      margin-right: 5px;
    }
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

</style>
